<template>
  <div class="report-wrapper">
    <v-header ref="header" title="举报"></v-header>
    <div style="padding: 15px; color: #666; overflow-y: scroll; -webkit-overflow-scrolling: touch;" :style="{height: mainHeight + 'px'}">
      <p v-if="question !== ''" style="margin-bottom: 10px;">{{question}}</p>
      <p v-else  style="margin-bottom: 10px;">举报原因</p>
      <x-textarea v-model="reason" placeholder="请填写举报原因" :height="120" :max="140"></x-textarea>
      <p style="margin-top: 20px; margin-bottom: 10px;">举报类型</p>
      <div class="checker">
        <check-icon v-for="item in reportTypes" :key="item.id" :value.sync="item.checked" class="item"> {{ item.label }}</check-icon>
      </div>
      <div ref="btn" @click="submitReport" class="btn" :class="{active: validate}">提交投诉</div>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { XTextarea, Group, CheckIcon } from 'vux'

import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'

/**
 * targetType
 * 0 用户
 * 1 酒店
 * 2 景区
 * 3 动态
 * 4 游记
 * 5 攻略
 * 101 游记评论的举报
 * 102 攻略评论的举报
 * 103 动态评论的举报
 * 104 景区评论的举报
 * 105 酒店评论的举报
 * 106 特产评论的举报
 * 107 美食评论的举报
 */
export default {
  data() {
    return {
      mainHeight: 500,
      question: '',
      reason: '',
      reportTypes: [{
        id: 1,
        label: '广告灌水',
        checked: false
      }, {
        id: 2,
        label: '色情暴力',
        checked: false
      }, {
        id: 3,
        label: '危害国家安全',
        checked: false
      }, {
        id: 4,
        label: '错误信息',
        checked: false
      }, {
        id: 5,
        label: '抄袭',
        checked: false
      }, {
        id: 6,
        label: '人身攻击',
        checked: false
      }, {
        id: 7,
        label: '其他',
        checked: false
      }]
    }
  },
  components: {
    VHeader, XTextarea, Group, CheckIcon
  },
  created () {
    if (this.$route.query.title) {
      let type = ''
      switch (this.$route.params.targetType + '') {
        case '0':
          type = '这个用户'
          break
        case '1':
          type = '这家酒店'
          break
        case '2':
          type = '这个景区'
          break
        case '3':
          type = '这篇动态'
          break
        case '4':
          type = '这篇游记'
          break
        case '5':
          type = '这篇攻略'
          break
        default:
          type = '这条评论'
      }
      this.question = `${type}《${this.$route.query.title.length > 30 ? this.$route.query.title.substring(0, 30) + '...' : this.$route.query.title}》存在什么问题？`
    }
  },
  mounted () {
    this.mainHeight = window.innerHeight - this.$refs.header.$el.offsetHeight
  },
  computed: {
    validate () {
      if (this.reason !== '' && this.reportTypes.findIndex(o => o.checked === true) > -1) {
        return true
      }
      return false
    }
  },
  methods: {
    submitReport () {
      if (!this.validate) {
        return
      }
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text('请先登录', 'middle')
        return
      }
      axios.post(this, '/v1/report', {
        userId,
        targetType: this.$route.params.targetType,
        targetId: this.$route.params.targetId,
        reason: this.reason
      }, () => {
        this.$vux.toast.text('举报成功', 'middle')
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.report-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color white
  z-index 101
  .checker
    .item
      width 50%
      margin-bottom 6px
  .btn
    width 180px
    padding 12px 0
    margin 0 auto
    margin-top 40px
    border-radius 3px
    line-height 1
    font-size $font-size-desc
    text-align center
    color $color-text-2
    background $color-background
  .active
    color #fff
    background $color-theme
</style>
<style>
.report-wrapper .vux-x-textarea.weui-cell {
  border: 1px solid #eaeaea;
  border-radius: 3px;
}
.report-wrapper .vux-x-textarea.weui-cell::before {
  display: none;
}
</style>

